<template>
	<view class="page-section">
		<view class="goods">
			<view class="goods-t"><text>订单号:</text><text>{{goodsMsg.order_sn}}</text></view>
			<view class="flex">
				<view class="goods-img"><image :src="goodsMsg.goods_thumb"></image></view>
				<view class="goods-cont">
					<view class="goods-cont-h3">{{goodsMsg.goods_name}}</view>
					<view class="goods-cont-sub">{{goodsMsg.attr_value_str}}</view>
				</view>
			</view>
		</view>
		<form @submit="formSubmit" report-submit="true">
			<view class="form-group bg-white" @click="ShowAfterTypeM">
				<view class="form-group-name">售后类型</view>
				<view :class="['form-group-input',AfterSaleTypeId==-1?'selecttxt':'']">{{AfterSaleTypeId==-1?'请选择售后类型':AfterSaleTypeList[AfterSaleTypeId]}}</view>
				<view class="iconfont arrow_right come-icon"></view>
			</view>
			<view class="form-group bg-white" @click="ShowResaon">
				<view class="form-group-name">退款原因</view>
				<view :class="['form-group-input ',ShowReasonIndex==-1?'selecttxt':'']">{{ShowReasonIndex==-1?'请选择退款原因':ShowReasonList[ShowReasonIndex]}}</view>
				<view class="iconfont arrow_right come-icon come-icon"></view>
			</view>
			<view class="form-group bg-white">
				<view class="form-group-name">退款金额</view>
				<view class="form-group-input width520">
					<text style="float: left;">￥</text>
					<input name="txtmoney" :value="TotalMoney" class="money" disabled />
					<text class="money_text">最多退{{TotalMoney}}元</text>
				</view>
			</view>
			<view class="line">
				<view></view>
			</view>

			<view class="beizhu">
				<view class="form-group-name">备注</view>
			</view>
			<view class="beizhu bg-white">
				<textarea class="group-area" name="remarks" placeholder="选填" v-model="remarks" ></textarea>
			</view>
			<view class="beizhu" style="border-bottom: 1rpx solid #fff;">
				<view class="form-group-name">上传凭证(最多三张)</view>
			</view>
			<view class="beizhu bg-white" style="display:flex">
				<view class="uploadimg" @click="uploadImg" data-index="0">
					<image style="width:158rpx;height:158rpx;" :src="UserCredentials[0]" mode="aspectFill" />
				</view>
				<view class="uploadimg" @click="uploadImg" data-index="1">
					<image style="width:158rpx;height:158rpx;" :src="UserCredentials[1]" mode="aspectFill" />
				</view>
				<view class="uploadimg" @click="uploadImg" data-index="2">
					<image style="width:158rpx;height:158rpx;" :src="UserCredentials[2]" mode="aspectFill" />
				</view>
			</view>
			<view class="btn">
				<button class="submit" form-type="submit">确定提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	var that;
	var defalutimg = "/static/img/camera.png";
	import {ApiUrl} from '@/utils/Config.js'
	import {showModal} from '@/utils/utils.js';
	import {httpReq} from '@/utils/request.js';
	export default {
		data() {
			return {
				goodsMsg:'',
				oid: '',
				SkuId: '',
				Remark: '',
				UserCredentials: new Array(3).fill(defalutimg),
				TotalMoney: 0.00,
				UploadGredentials: [], //上传图片集合
				ReturnMoney: 0.00,
				ImageIndex: 0,
				ShowReasonList: ['拍错/多拍/不想要', '缺货', '未按约定时间发货'],
				ShowReasonIndex: -1, //退款原因
				AfterSaleTypeList: ['仅退款', '退款退货'],
				AfterSaleTypeId: -1,//售后类型
				remarks:""
			};
		},
		onLoad(options) {
			that = this;
			this.oid = options.oid;
			this.getRefundsMsg()
		},
		onShow() {
			
		},
		methods: {
			getRefundsMsg(){
				this.$https.POST({
					url:'/order/returnRequest',
					data:{
					  oid: that.oid,
					},
					success(res){
						that.goodsMsg = res.data;
						that.AfterSaleTypeList = res.data.after_sales_type_list;
						that.ShowReasonList = res.data.apply_reason_list;
						that.TotalMoney = res.data.payable_amount
					}
				})
			},
			uploadImg: function(e) {
				var that = this;
				var tempgreden = that.UserCredentials;
				var idx = e.currentTarget.dataset.index;
				uni.chooseImage({
					sizeType:['original', 'compressed'],
					success: function(res) {
						console.log(res)
						that.$set(that.UserCredentials,idx,res.tempFilePaths[0])
					}
				})
			},
			ShowAfterTypeM: function(e) {
				var that = this;
				uni.showActionSheet({
					itemList: that.AfterSaleTypeList,
					success: function(res) {
						if (!res.cancel) {
							that.AfterSaleTypeId=res.tapIndex;
						}
					}
				})
			},
			ShowResaon: function(e) {
				var that = this;
				wx.showActionSheet({
					itemList: that.ShowReasonList,
					success: function(res) {
							that.ShowReasonIndex=res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			},
			formSubmit: function(e) {
				var that = this;
				var reasonId = parseInt(that.ShowReasonIndex);
				var aftertypeId = that.AfterSaleTypeId;
				var returnmoney = parseFloat(e.detail.value.txtmoney);
				if (returnmoney > parseFloat(that.TotalMoney)) {
					this.$showToast("请输入正确的退款金额,金额必须小于等于" + that.TotalMoney + "元");
					return;
				}
				if (reasonId < 0) {
					this.$showToast("请选择要退款的原因");
					return;
				}
				if (aftertypeId < 0) {
					this.$showToast("请选择售后类型");
					return;
				}
				var temp = [];
				that.UserCredentials.find(function(item, index) { //筛选上传的图片
					if (item != defalutimg) {
						temp.push(item);
					}
				});
				uni.showLoading()
				that.UploadBatchImages(that, temp); //上传图片
			},
			/* 先提交图片再提交退款信息 */
			UploadBatchImages: function(that, imglist) {
				var currentuploadimg = imglist.shift();
				if (currentuploadimg) {
						httpReq.upLoadFile({
							url:'/user/imgUpload',
							filePath: currentuploadimg,
							name: 'file',
							success: function(res) {
								that.UploadGredentials.push(res.data);
							},
							complete: function(res) {
								if (imglist.length > 0) {
									that.UploadBatchImages(that, imglist);
								} else {
									that.AddReturnInfo();
								}
							}
						})
				} else {
					that.AddReturnInfo();
				}
			},
			/* 提交退货信息 */
			AddReturnInfo: function(temp) {
				let after_sales_type = this.AfterSaleTypeList[this.AfterSaleTypeId];
				let apply_reason = this.ShowReasonList[this.ShowReasonIndex];
				let file = this.UploadGredentials.join('|');
				this.$https.POST({
					url:'/order/returnRequestHandle',
					data:{
					  oid: that.oid,
					  after_sales_type:after_sales_type,
					  apply_reason:apply_reason,
					  remarks:that.remarks,
					  files_path:file
					},
					success(res){
						that.$showToast(res.message);
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages/user/order_list/order_list?tbIndex=4"
							})
						},1000)
						uni.hideLoading()
					},
					failcb(){
						uni.hideLoading()
					}
				})
			},
			ToTrim: function(str) {
				return str.replace(/(^\s*)|(\s*$)/g, "");
			},
		},
		onUnload() {
			that=null;
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.page-section {
		
		overflow: hidden;
	}

	.line {
		position: relative;
	}

	.line wx-view {
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		top: -1rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.form-group {
		padding: 24rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		overflow: hidden;
		display: flex;
		position: relative;
		color: #212121;
	}

	.form-group .width520 {
		width: 520rpx;
	}

	.form-group .selecttxt {
		color: #bdbdbd;
	}

	.beizhu {
		padding: 24rpx 24rpx 8rpx 24rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		overflow: hidden;
		display: flex;
		position: relative;
		color: #212121;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.beizhu .form-group-name {
		color: #747474;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.beizhu .group-area {
		padding: 6rpx 0 10rpx 0;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #212121;
		width: 100%;
		height: 76rpx;
	}

	.beizhu .group-area:-moz-placeholder {
		color: #bdbdbd;
	}

	.beizhu image {
		margin-bottom: 16rpx;
	}

	.form-group:not(:last-child):after {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 726rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}


	.form-group-name {
		margin-right: 16rpx;
		min-width: 168rpx;
		overflow: hidden;
	}

	.width540 {
		width: 540rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		color: #212121;
	}

	.form-group-input input {
		width: 500rpx;
		text-align: center;
	}


	.come-icon {
		font-size: 13px;
		right: 24rpx;
		position: absolute;
		color: #9e9e9e;
	}

	.change-num {
		padding: 6rpx 16rpx;
		border: 1rpx #BDBDBD solid;
		border-radius: 30rpx;
		float: left;
	}

	.change-num .muse,
	.change-num .add {
		width: 24rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: center;
		color: #BDBDBD;
		padding-top: 2rpx;
		float: left;
	}

	.change-num .input_num {
		width: 80rpx;
		color: #212121;
		font-size: 32rpx;
		line-height: 50rpx;
		float: left;
		text-align: center;
	}

	.change_text {
		float: left;
		width: 180rpx;
		margin-left: 16rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		color: #747474;
		padding: 6rpx 0;
	}

	.form-group-input input.money {
		width: 280rpx;
		float: left;
		padding-right: 16rpx;
		color: #212121;
		font-size: 32rpx;
		line-height: 50rpx;
		height: 50rpx;
		text-align: left;
		font-family: Arial;
	}

	.form-group-input input.txtmoney {
		font-family: Arial
	}

	.form-group-input text.money_text {
		float: right;
		color: red;
		font-size: 24rpx;
	}

	.btn {
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		margin-bottom: 51rpx;
	}

	.submit {
		color: #fff;
		width: 70%;
		border-radius: 40rpx;
		margin-top: 48rpx;
		font-size: 36rpx;
		line-height: 80rpx;
		background:$maincolor;
		border: none;
	}

	.cancel {
		color: #424242;
		background: #FBFAFC;
		border-radius: 8rpx;
		margin-top: 24rpx;
		font-size: 36rpx;
		line-height: 48rpx;
		padding: 24rpx 0;
		border: 1rpx solid #D6D5D6;

	}

	.uploadimg {
		width: 25%;
	}

	.uploadimg image {
		border: 1rpx solid #e0e0e0;
		overflow: hidden;
	}


	.showdiaolg {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		background: #fff;
		text-align: center;
		overflow: hidden;
		z-index: 99;
	}

	.showdiaolg view {
		border-bottom: 1rpx solid #d6d5d6;
		height: 75rpx;
		line-height: 75rpx;
		z-index: 99;
	}

	.showdiaolg view:last {
		border-bottom: 0
	}
	.bg-white {
		background: #fff;
	}

	.goods{
		 padding:0 20rpx 20upx; background: #fff; margin-bottom: 24rpx; 
		&-img{
			image{width: 150rpx;height: 150rpx;}
		}
		&-t{justify-content: space-between;display: flex;height: 80upx;line-height: 80upx;}
		&-cont{
			flex: 1;margin-left:20rpx; 
			&-p{font-size: 26rpx;color: #333;line-height: 60rpx;}
			&-h3{font-size: 26rpx;color: #444;}
			&-sub{font-size: 24rpx;color: #9e9e9e;}
		}
	}
</style>
